import { getT } from '@/app/i18n'
import { Header } from '../components/Header'

export default async function DevicesPage() {
  const { t } = await getT('translation')
  
  const deviceCategories = [
    { 
      key: 'dslr', 
      icon: '📷',
      color: 'from-blue-500 to-blue-600',
      bgColor: 'bg-blue-50 dark:bg-blue-900/20',
      count: '1,234'
    },
    { 
      key: 'mirrorless', 
      icon: '📸',
      color: 'from-purple-500 to-purple-600',
      bgColor: 'bg-purple-50 dark:bg-purple-900/20',
      count: '2,456'
    },
    { 
      key: 'action', 
      icon: '🎥',
      color: 'from-red-500 to-red-600',
      bgColor: 'bg-red-50 dark:bg-red-900/20',
      count: '890'
    },
    { 
      key: 'smartphone', 
      icon: '📱',
      color: 'from-green-500 to-green-600',
      bgColor: 'bg-green-50 dark:bg-green-900/20',
      count: '3,567'
    },
    { 
      key: 'drone', 
      icon: '🚁',
      color: 'from-orange-500 to-orange-600',
      bgColor: 'bg-orange-50 dark:bg-orange-900/20',
      count: '678'
    },
    { 
      key: 'film', 
      icon: '🎞️',
      color: 'from-pink-500 to-pink-600',
      bgColor: 'bg-pink-50 dark:bg-pink-900/20',
      count: '456'
    }
  ]
  
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-black">
      <Header />
      <main className="mx-auto w-full max-w-7xl px-6 py-12">
        {/* Header */}
        <div className="mb-12 text-center">
          <h1 className="mb-4 text-5xl font-bold text-gray-900 dark:text-white">
            {t('devices.title')}
          </h1>
          <p className="mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-400">
            Explore photography across all devices - from professional DSLRs to smartphone cameras
          </p>
        </div>
        
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {deviceCategories.map((category) => (
            <a
              key={category.key}
              href={`/en/devices/${category.key}`}
              className="group relative overflow-hidden rounded-3xl border border-gray-200 bg-white p-8 shadow-lg transition hover:shadow-2xl hover:-translate-y-1 dark:border-gray-800 dark:bg-gray-900"
            >
              {/* Background Gradient */}
              <div className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 transition group-hover:opacity-5`}></div>
              
              {/* Content */}
              <div className="relative">
                <div className={`mb-6 inline-flex h-20 w-20 items-center justify-center rounded-2xl ${category.bgColor} text-5xl transition group-hover:scale-110`}>
                  {category.icon}
                </div>
                
                <h2 className="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
                  {t(`devices.${category.key}`)}
                </h2>
                
                <p className="mb-4 text-gray-600 dark:text-gray-400">
                  {category.count} photos available
                </p>
                
                <div className="flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400">
                  Explore gallery
                  <svg className="h-4 w-4 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </div>
              </div>

              {/* Corner Decoration */}
              <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-blue-500/10 to-purple-500/10 blur-2xl transition group-hover:scale-150"></div>
            </a>
          ))}
        </div>

        {/* Featured Brands Section */}
        <div className="mt-20">
          <h2 className="mb-8 text-center text-3xl font-bold text-gray-900 dark:text-white">
            Popular Brands
          </h2>
          <div className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-6">
            {['Canon', 'Sony', 'Nikon', 'Fujifilm', 'Panasonic', 'GoPro', 'DJI', 'Apple', 'Samsung', 'Leica', 'Olympus', 'Pentax'].map((brand) => (
              <a
                key={brand}
                href={`#${brand.toLowerCase()}`}
                className="flex items-center justify-center rounded-xl border border-gray-200 bg-white p-6 font-semibold text-gray-700 transition hover:border-blue-500 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
              >
                {brand}
              </a>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}
